<template>
 <li>
    <h3>姓名:{{ name }}</h3>
    <p>
      爱好:
      <span v-for="item in hobby" :key="item"> {{ item }} </span>
    </p>
  </li>
</template>

<script>
export default {
    name:"Item",
    // props的第一种写法，数组写法
    // props:["name","hobby"]

    // props的第二种写法，对对象限制类型写法
    props:{
      name:String,
      hobby:Array,
      count:Number,
    }

    // props的第三种写法，对类型等各种限制的写法
    // props:{
    //   name:{
    //     type:String,
    //     required:true,
    //     default:"张三",
    //   },
    //   hobby:Array,
    //   // 我们可以做自定义规则限制
    //   count:{
    //     // validator是用来给某个props做自定义限制规则的,参数value就是props接受的值,如果函数返回true,则通过校验,否则不通过
    //     validator(value){
    //       const arr = [0,3,5,8];
    //       return arr.includes(value)
    //     }
    //   }
    // }

}
</script>

<style>

</style>